<template>
  <div>
    <!-- banner -->
    <div class="archive-banner banner">
      <h1 class="banner-title">时间链</h1>
    </div>
    <!-- 归档列表 -->
    <v-card class="blog-container" >
      <timeline>
        <timeline-title> 目前共计{{ count }}篇文章，继续加油 </timeline-title>
        <timeline-item v-for="item of archiveList" :key="item.id" >
          <!-- 日期 -->
          <span class="date" :formatter="dateFormat" v-if="form.username===item.author">{{ item.time | date }}</span>
          <!-- 文章标题 -->
          <a  @click="detail(item)"
                  style="color:#666;text-decoration: none"
          >
            {{ item.title }} {{item.flag===false?'🔒':''}}
          </a>
        </timeline-item>
      </timeline>
      <!-- 分页按钮 -->
      <v-pagination
              color="#00C4B6"
              v-model="current"
              :length="Math.ceil(count / 10)"
              total-visible="1"
      />
    </v-card>
  </div>
</template>

<script>
  import request from  '../../utils/request'
    import { Timeline, TimelineItem, TimelineTitle } from "vue-cute-timeline";
    export default {
        created() {
            let str=sessionStorage.getItem("user")
            this.form=JSON.parse(str)

            request.get('/article/list/'+this.form.username).then(res=>{
                console.log(res)

            this.archiveList=res.data
                this.count=res.data.length
                // this.current=res.data.length
            })
        },
        components: {
            Timeline,
            TimelineItem,
            TimelineTitle
        },
        data: function() {
            return {
                current: 1,

                archiveList: [],
                form:{avatar:''},
                count:1
            };


        },
        methods: {
            dateFormat(row, column, cellValue, index) {
                console.log(row, column, cellValue, index)
                const daterc = row[column.property]
                if (daterc != null) {
                    var date = new Date(daterc);
                    var year = date.getFullYear();
                    /* 在日期格式中，月份是从0开始，11结束，因此要加0
                     * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
                     * */
                    var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
                    var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
                    var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
                    var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
                    var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
                    // 拼接
                    return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
                }
            }
            ,
            detail(ids){
                console.log(ids)
                let id=ids.id
                this.$router.push({
                    path: '/articles/',

                    query: {id:id}
                })
            },

        },

    };
</script>

<style scoped>
  .archive-banner {
    background: url(https://static.talkxj.com/config/83be0017d7f1a29441e33083e7706936.jpg)
    center center / cover no-repeat;
    background-color: #49b1f5;
  }
  .time {
    font-size: 0.75rem;
    color: #555;
    margin-right: 1rem;
  }
</style>
